<template>
  <div class="full-width">
    <div
      :style="{'background-image': 'url(' + state.detail.coverImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      class="spy-15 min-width-130"
      id="header">
      <div class="width-130 mx-auto">
        <p class="text-orange text-80">{{state.detail.name}}</p>
        <p class="text-orange text-80">.</p>
        <p class="text-gray text-24">Kupo Technology</p>
      </div>
    </div>
    <div v-html="state.detail.rockTextDesc" class="flex-column sp_m mx-auto width-130 px-16 py-38 bg-gray-light3 rounded-15">
    </div>
    <div class="width-130 flex_between_center flex-wrap mx-auto my-40 pb-20">
      <swiper
        :slidesPerView="4"
        :spaceBetween="0"
        :freeMode="true"
        :modules="modules"
        class="mySwiper"
      >
        <swiper-slide
          class="swiper-slide flex-column"
          v-for="(banner, index) in state.detail.details"
          :key="index"
        >
          <time-line :img="banner.picture" :title="banner.title" :content="banner.desc" :position="banner.sort%2 === 0 ? 'top' : 'bottom'" />
        </swiper-slide>
      </swiper>
    </div>
    <ContactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle'
import 'swiper/css/free-mode'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { FreeMode } from 'swiper'
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'
import timeLine from '@/components/timeLine.vue'
import { onMounted, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import userStore from '@/store/index'
import urls from '@/api/index'

const state = reactive({
  detail: {}
})
watch(() => userStore.state.lang, () => {
  getDetail()
})
const getDetail = () => {
  userStore.commit('CHANGELOAD', true)
  const params = {
    id: '62d6bf67e1d8375b113f70a5',
    lang: userStore.state.lang
  }
  urls.home.getModuleData(params)
    .then(res => {
      state.detail = res.data
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
const modules = [FreeMode]
onMounted(() => {
  getDetail()
  const header = document.getElementById('header')
  header.scrollIntoView()
})

</script>

<style lang="scss">
.bg_img {
  background: url("@/assets/images/Development.jpg") no-repeat;
  background-size: cover;
}
.sp_m{
  margin-top: -120px;
  p{
    font-size: 18px
  }
}
.out:hover img{
  transform: scale(1.1);
}
.out img{
  transition: all .5s ease;
  object-fit: cover;
}

.content{
  width:100%;
  height: 45px;
  margin-bottom: 32px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
.vertical-line {
  width: 2px;
  height: 100px;
  background: #ff5a2d;
  position: absolute;
  top: 320px;
  left: 40px;
  z-index: 888;
}
.news-item:hover{
  color: #fff;
  background: #222!important;
  img{
    filter: blur(5px);
  }
  p{
    color: #fff;
  }
}
</style>
